<template>
  <div>
    组件内守卫: <br> <br>
    <img src="../../assets/image/routerImg/beforeRoute.png" alt=""> <br><br>

    1. beforeRouteEnter：
    该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，
    全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined。
    因为它在组件生命周期beforeCreate阶段触发，此时的新组件还没有被创建。在这个钩子函数中，可以通过传一个回调给 
    next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。 <br> <br>
    <img src="../../assets/image/routerImg/beforeRouteEnter.png" alt=""> <br><br>

    2. beforeRouteUpdadte：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。 <br><br>

    3. beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过next( false )来取消 <br> <br>
    <img src="../../assets/image/routerImg/beforeRouteLeave.png" alt=""> <br><br>
  </div>
</template>

<script>
   export default {
      name: ""
}
</script>

<style scoped>
img {
    width: 70%;
}
</style>
